<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="../jquery.min.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="title" id="one-title">
        <span class="active"><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box" id="one">
        <div class="input-item">
            <label>请输入手机号：</label>
            <input type="text" id="one-input">
        </div>
        <button>下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="title" id="two-title">
        <span><i>1</i>输入找回账号</span>
        <span class="active"><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box" id="two">
        <div class="input-item">
            <label> 用户名：</label>
            <input type="text" value="xxxx" disabled id="user">
        </div>
        <div class="input-item">
            <label> 手机号：</label>
            <input type="text" value="xxxx" disabled id="shouJi">
        </div>
        <div class="input-item">
            <label>密保问题：</label>
            <input type="text" value="xxxxxxx" disabled id="pass">
        </div>
        <div class="input-item">
            <label>密保答案：</label>
            <input type="text" id="two-input">
        </div>
        <button class="shang">上一步</button>
        <button class="xia">下一步</button>
    </div>
    <!----------------------------------------------------->
    <br>
    <hr>
    <div class="title" id="three-title">
        <span><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span class="active"><i>3</i>重置密码</span>
    </div>
    <div class="box" id="three">
        <div class="input-item">
            <label>请输入新密码：</label>
            <input type="text" id="three-input">
        </div>
        <button class="shang">上一步</button>
        <button class="ti">立即重置</button>
    </div>
    <script src="../jquery.min.js"></script>
    <script src="../axios.js"></script>
    <script>
        $(function () {
            const user = document.querySelector('#user')
            const shouJi = document.querySelector('#shouJi')
            const pass = document.querySelector('#pass')
            $('#two-title,#three-title').addClass('display')
            $('#two,#three').addClass('display')
            $('hr').addClass('display')

            // 设置统一的登录接口
            axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
            function checkForm() {
                //获取用户名输入项
                // let inputObj = document.getElementById("user");
                //获取输入项的值
                let uValue
                user.addEventListener('change', names)
                function names() {
                    uValue = user.value;
                    // console.log(uValue);
                    // console.log(uValue.length);
                    //用户名长度不能低于6位 
                    if (uValue.length < 2) {
                        alert("对不起,您输入的账号长度太短了");
                        return false;
                    }
                    return true
                }

                //密码长度大于6 和确认必须一致
                //获取密码框输入的值
                // let input_password = document.getElementById("password");
                // input_password.addEventListener('change', pass)
                // let uPass
                // function pass() {
                //     uPass = input_password.value;
                //     if (uPass.length < 6) {
                //         alert("对不起,您输入的密码长度太短了");
                //         return false;
                //     }
                //     return true
                // }
                //     // 获取确认密码框的值
                //     let input_repassword = document.getElementById("repassword");
                //     let uRePass = input_repassword.value;
                //     input_repassword.addEventListener('change', passs)
                //     function passs() {
                //         if (uPass != uRePass) {
                //             alert("对不起,两次密码不一致!");
                //             return false;
                //         }
                //         return true
                //     }

                //校验手机号
                let input_mobile = document.getElementById("one-input");
                input_mobile.addEventListener('change', mobile)
                let uMobile
                function mobile() {
                    uMobile = input_mobile.value;
                    if (!/^[1][3578][0-9]{9}$/.test(uMobile)) {

                        alert("对不起,您的手机号无法识别，请重新输入");
                        return false;
                    }
                    return true;
                }

                //     let form = document.querySelector(".rg_center .rg_form form");
                //     form.addEventListener("submit", async function (e) {
                //         e.preventDefault();
                //         const sex = +$("[name=sex]:checked").val()
                //         // $("input[name='sex']:checked").val()
                //         const vip = +$("[name=vip]:checked").val()
                //         // console.log(sex);
                //         // console.log(vip);
                //         if (names() && pass() && mobile()) {
                //             const { data: res } = await axios.post('/user/reg', {
                //                 username: uValue,
                //                 password: uPass,
                //                 phone: uMobile,
                //                 sex,
                //                 vip,
                //                 question: $('#question').val(),
                //                 answer: $('#answer').val(),
                //                 description: '无'
                //             })
                //             // console.log(res);
                //             if (!res.success) return alert("注册失败：" + res.msg);
                //             alert(res.msg);
                //             location.href = "../01-loginBaseCode/login.html";
                //         } else {
                //             e.preventDefault()
                //         }

                //     });



                let id
                let username
                let question
                let phone
                //第一部分
                $('#one button').on('click', async function () {
                    $('#one-title,#three-title').hide()
                    $('#one,#three').hide()
                    $('#two-title,#two').show()
                    const res = await axios.get('/user/findPwd', {
                        params: {
                            phone: uMobile
                        }
                    })
                    console.log(res);
                    if (!res.data.success) return alert("注册失败：" + res.msg);
                    alert(res.data.msg);
                    id = res.data.data.id
                    username = res.data.data.username
                    question = res.data.data.question
                    phone = res.data.data.phone


                    // console.log(id);
                    $('#user').attr('disabled', false)
                    // $('#user').val() = username
                    user.value = username
                    $('#shouJi').attr('disabled', false)
                    shouJi.value = phone
                    $('#pass').attr('disabled', false)
                    pass.value = question
                })
                //第二部分
                $('#two .shang').on('click', function () {
                    $('#two-title,#three-title').hide()
                    $('#two,#three').hide()
                    $('#one-title,#one').show()
                })
                $('#two .xia').on('click', function () {
                    $('#two-title,#one-title').hide()
                    $('#two,#three').hide()
                    $('#three-title,#three').show()
                })
                //第三部分
                $('#three .shang').on('click', function () {
                    $('#one-title,#three-title').hide()
                    $('#one,#three').hide()
                    $('#two-title,#two').show()

                })
                //提交部分
                $('.ti').on('click', async function (e) {
                    const ress = await axios.post('/user/resetPwd', {
                        id: id.toString(),
                        password: $('#three-input').val(),
                        answer: $('#two-input').val()

                    })
                    console.log(ress);
                    if (!ress.data.success) return alert("修改失败：" + ress.msg);
                    alert(ress.data.msg);
                    location.href = '../01-loginBaseCode/login.html'
                })
            }
            checkForm()


        })
    </script>
</body>

</html>